// Main page Vector diagram
$spacing-vertical: 0
$transition-fast: 0

// Main page globe icon
$globe-dark-mode-land: rgb(32, 32, 32)
$globe-dark-mode-water: rgb(66, 66, 98)
$globe-light-mode-land: rgb(168, 168, 168)
$globe-light-mode-water: rgb(216, 216, 216)

@keyframes indexHeroInitial
  0%
    background-size: 100% 100%
  90%
    background-size: 250% 250%
  100%
    background-size: 200% 200%

@keyframes indexHeroPulsating
  0%
    background-size: 200% 200%
  50%
    background-size: 150% 150%
  100%
    background-size: 200% 200%

@keyframes diagramExplodeSource1
  100%
    opacity: 1
    transform: translate(82px, 56px)

@keyframes diagramExplodeSource2
  100%
    opacity: 1
    transform: translate(0px, 122px)

@keyframes diagramExplodeSource3
  100%
    opacity: 1
    transform: translate(82px, 182px)

@keyframes diagramExplodeLogo
  40%
    transform: translate(328px, 53px)
  100%
    opacity: 1
    transform: translate(328px, 38px)

@keyframes diagramExplodeStructure
  100%
    opacity: 1
    transform: translate(29px, 74px)

@keyframes diagramExplodeAggregate
  100%
    opacity: 1
    transform: translate(29px, 194px)

@keyframes diagramExplodeSink1
  100%
    opacity: 1
    transform: translate(1px, 58px)

@keyframes diagramExplodeSink2
  100%
    opacity: 1
    transform: translate(81px, 124px)

@keyframes diagramExplodeSink3
  100%
    opacity: 1
    transform: translate(0px, 184px)

@keyframes diagramFadeIn
  0%
    opacity: 0.01
  100%
    opacity: 1

@media (max-width: 480px)
  html.dark .diagram-container,
  .diagram-container
    animation: none
    background-image: none
    min-height: auto

  .diagram
    margin: spacing-vertical 0 0 0

.diagram
  margin: calc($spacing-vertical * 2 ) 0
  max-height: 21em
  height: auto
  width: 100%

  .fade-in
    animation: diagramFadeIn 1s ease-in
    animation-delay: 1000ms
    animation-fill-mode: forwards
    opacity: 0.01

  #Source-1
    animation: diagramExplodeSource1 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(315px, 132px)

  #Source-2
    animation: diagramExplodeSource2 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(315px, 132px)

  #Source-3
    animation: diagramExplodeSource3 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(315px, 132px)

  #Logo
    animation: diagramExplodeLogo 1050ms cubic-bezier(0, 5, 1, 4.1)
    animation-delay: 250ms
    animation-fill-mode: forwards
    opacity: 1
    transform: translate(328px, 38px)

  #Structure
    animation: diagramExplodeStructure 700ms cubic-bezier(0, 3, 1, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 1
    transform: translate(29px, 102px)

  #Aggregate
    animation: diagramExplodeAggregate 700ms cubic-bezier(0, 3, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    transform: translate(29px, 166px)

  #Sink-1
    animation: diagramExplodeSink1 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(-212px, 134px)

  #Sink-2
    animation: diagramExplodeSink2 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(-212px, 134px)

  #Sink-3
    animation: diagramExplodeSink3 700ms cubic-bezier(0, 1.5, 0.32, 1.5)
    animation-delay: 650ms
    animation-fill-mode: forwards
    opacity: 0
    transform: translate(-212px, 134px)

  a
    circle
      transition: all $transition-fast ease

    &:hover
      circle
        transform: scale(1.1) translate(-0.5%, -1%)

        #Structure, #Sample, #Aggregate
          polygon
            transform: scale(1.05) translate(-0.5%, -1%)

    #Structure, #Sample, #Aggregate
      polygon
        transition: all $transition-fast ease

// Spinning globe in the main page community section
.dark
  #globe-wrapper
    #globe
      svg
        fill: $globe-dark-mode-water

        .land
          fill: $globe-dark-mode-land

.light
  #globe-wrapper
    #globe
      svg
        fill: $globe-light-mode-water

        .land
          fill: $globe-light-mode-land
